<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品列表项</title>
    <style>
        *{/*样式的重置*/
            margin:0;
            padding:0;
            list-style: none;
        }
        #root{/*整体的边框*/
            /*background: red;*/
            width:1000px;
            min-height:800px;
            margin:0px auto;/*水平居中*/
            position: relative;
        }
        #head{
            /*background: black;*/
            width:100%;/*跟随root，此时可以用百分号*/
            height:100px;
            position: absolute;
        }
        #left{
            /*background: yellow;*/
            width:80%;/*跟随root，此时可以用百分号*/
        }
        #right{
            /*background:brown;*/
            width:20%;/*跟随root，此时可以用百分号*/
            right:0;
        }
        #foot{
            background:blue;
            width:100%;
            height: 100px;
            bottom: 0;

        }
        .layout-box{
            position: relative;
        }
        .mid{
            min-height: 600px;
            top:100px;
        }
        #nav{
            width:100%;
        }
        #nav li{
            float:left;
            width:20%;
            height:30px;
            background: grey;
            text-align:center;
        }
        #nav li>a{
            line-height: 30px;
            text-decoration: none;
            color:black;

        }
        #goods-box>li{
            width:33%;
            padding:0.16%;
            float:left;/*分列*/
            text-align:center;
            position:relative;
        }
        #goods-box>li img{
            width:90%;
        }
        .left{
            /*position: absolute;
            left:0;*/
            display:inline-block;
            float:left;
        }
        .right{
            /*right:0;
            position: absolute;*/
            display:inline-block;
            float:right;
        }

        .clear-float{
            clear:both;
        }
        #top-10-list{
            margin-bottom: 20px;
        }
        #top-10-list img{
            width:200px;
        }
        #top-10-list li{
            margin:15px;
        }
    </style>
</head>
<body>
    <div id="root">
        <div id="head">
            <ul id="nav"><!--导航栏-->
                <li><a href>列表项</a></li>
                <li><a href>列表项</a></li>
                <li><a href>列表项</a></li>
                <li><a href>列表项</a></li>
                <li><a href>列表项</a></li>
            </ul>
            <h1>淘宝网</h1>
        </div><!--页首结束-->
        <div id="left" class="layout-box mid">
            <ul id="goods-box">
                <li><img src="2015318212559536.jpg" alt="">
                    <div><span class="left">只要999元！</span>
                        <span class="right">10000人付款</span>
                    </div>
                    <div><a href="#" class="left">泥人，银魂同款【包邮】</a></div>
                    <div><span class="right">兵工厂</span>
                        <span class="left">产地：广州</span></div>
                    <div class="clear-float"></div>
                    <div><span class="left">sc</span>
                        <span class="right">ww</span></div>

                </li>



                <li><img src="2015318212559536.jpg" alt="">
                    <div><span>只要999元！</span><span>10000人付款</span></div>
                    <div><a href="#">泥人，银魂同款【包邮】</a></div>
                    <div><span>兵工厂</span><span>产地：广州</span></div>
                    <div><span>sc</span><span>ww</span></div></li>
                <li><img src="2015318212559536.jpg" alt="">
                    <div><span>只要999元！</span><span>10000人付款</span></div>
                    <div><a href="#">泥人，银魂同款【包邮】</a></div>
                    <div><span>兵工厂</span><span>产地：广州</span></div>
                    <div><span>sc</span><span>ww</span></div></li>
                <li><img src="2015318212559536.jpg" alt="">
                    <div><span>只要999元！</span><span>10000人付款</span></div>
                    <div><a href="#">泥人，银魂同款【包邮】</a></div>
                    <div><span>兵工厂</span><span>产地：广州</span></div>
                    <div><span>sc</span><span>ww</span></div></li>
                <li><img src="2015318212559536.jpg" alt="">
                    <div><span>只要999元！</span><span>10000人付款</span></div>
                    <div><a href="#">泥人，银魂同款【包邮】</a></div>
                    <div><span>兵工厂</span><span>产地：广州</span></div>
                    <div><span>sc</span><span>ww</span></div></li>
                <li><img src="2015318212559536.jpg" alt="">
                    <div><span>只要999元！</span><span>10000人付款</span></div>
                    <div><a href="#">泥人，银魂同款【包邮】</a></div>
                    <div><span>兵工厂</span><span>产地：广州</span></div>
                    <div><span>sc</span><span>ww</span></div></li>
                <li><img src="2015318212559536.jpg" alt="">
                    <div><span>只要999元！</span><span>10000人付款</span></div>
                    <div><a href="#">泥人，银魂同款【包邮】</a></div>
                    <div><span>兵工厂</span><span>产地：广州</span></div>
                    <div><span>sc</span><span>ww</span></div></li>
                <li><img src="2015318212559536.jpg" alt="">
                    <div><span>只要999元！</span><span>10000人付款</span></div>
                    <div><a href="#">泥人，银魂同款【包邮】</a></div>
                    <div><span>兵工厂</span><span>产地：广州</span></div>
                    <div><span>sc</span><span>ww</span></div></li>
                <li><img src="2015318212559536.jpg" alt="">
                    <div><span>只要999元！</span><span>10000人付款</span></div>
                    <div><a href="#">泥人，银魂同款【包邮】</a></div>
                    <div><span>兵工厂</span><span>产地：广州</span></div>
                    <div><span>sc</span><span>ww</span></div></li>
                <li><img src="2015318212559536.jpg" alt="">
                    <div><span>只要999元！</span><span>10000人付款</span></div>
                    <div><a href="#">泥人，银魂同款【包邮】</a></div>
                    <div><span>兵工厂</span><span>产地：广州</span></div>
                    <div><span>sc</span><span>ww</span></div></li>
                <li><img src="2015318212559536.jpg" alt="">
                    <div><span>只要999元！</span><span>10000人付款</span></div>
                    <div><a href="#">泥人，银魂同款【包邮】</a></div>
                    <div><span>兵工厂</span><span>产地：广州</span></div>
                    <div><span>sc</span><span>ww</span></div></li>
                <li><img src="2015318212559536.jpg" alt="">
                    <div><span>只要999元！</span><span>10000人付款</span></div>
                    <div><a href="#">泥人，银魂同款【包邮】</a></div>
                    <div><span>兵工厂</span><span>产地：广州</span></div>
                    <div><span>sc</span><span>ww</span></div></li>
                <li><img src="2015318212559536.jpg" alt="">
                    <div><span>只要999元！</span><span>10000人付款</span></div>
                    <div><a href="#">泥人，银魂同款【包邮】</a></div>
                    <div><span>兵工厂</span><span>产地：广州</span></div>
                    <div><span>sc</span><span>ww</span></div></li>
                <li><img src="2015318212559536.jpg" alt="">
                    <div><span>只要999元！</span><span>10000人付款</span></div>
                    <div><a href="#">泥人，银魂同款【包邮】</a></div>
                    <div><span>兵工厂</span><span>产地：广州</span></div>
                    <div><span>sc</span><span>ww</span></div></li>
                <li><img src="2015318212559536.jpg" alt="">
                    <div><span>只要999元！</span><span>10000人付款</span></div>
                    <div><a href="#">泥人，银魂同款【包邮】</a></div>
                    <div><span>兵工厂</span><span>产地：广州</span></div>
                    <div><span>sc</span><span>ww</span></div></li>
                <li><img src="2015318212559536.jpg" alt="">
                    <div><span>只要999元！</span><span>10000人付款</span></div>
                    <div><a href="#">泥人，银魂同款【包邮】</a></div>
                    <div><span>兵工厂</span><span>产地：广州</span></div>
                    <div><span>sc</span><span>ww</span></div></li>
            </ul>
        </div><!--不能有两个class，两个类名要放到一个引号里面中间用空格隔开-->
        <div id="right" class="layout-box mid">
            <div id="top-10-list">
                风云榜前十名
                <ul>
                    <li><img src="2015318212559536.jpg" alt=""><div>
                        <span class="left">999元</span>
                        <span class="right">销量100</span>
                    </div></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
        <div id="foot" class="layout-box"></div>

    </div>
</body>
</html>
<!--css:
        选择器：
            通配符选择器 *{}
            元素选择器 div{}
            ID选择器 #id{}
            class选择器 .classname{}
            伪类 :hover
            伪元素 :after
            属性选择器
            关系选择器：
                后代选择器 #root(空格)a
                子选择器 #root>#head
                相邻选择器 #head+#left
                .a.b ==>class="a b"(同时具备两个class才能被选中)

        常用属性：
             背景
             盒子模型：边框
             字体
             定位
                配合position一起使用的有：
             浮动
             css3新增样式

        布局：
            固定定位布局  单位用像素(px)，布局用position

            固定浮动布局  单位用像素(px)，布局用float
            流体定位布局  单位用%
            流体浮动布局  单位用%
参考手册：w3school
-->